<template>
	<el-dialog :title="dialog.title" v-model="dialog.isShowDialog" append-to-body :close-on-click-modal="false" width="500px">
		<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="auto" disabled>
			<el-form-item label="本次提现总金额" prop="money">
				<el-input v-model="ruleForm.money" />
			</el-form-item>
			<template v-if="ruleForm.type !== '4'">
				<el-form-item label="结算卡联行号" prop="bank_code">
					<el-input v-model="ruleForm.bank_code" />
				</el-form-item>
				<el-form-item label="结算银行卡开户名" prop="account_name">
					<el-input v-model="ruleForm.account_name" />
				</el-form-item>
				<el-form-item label="结算银行卡账号" prop="account_no">
					<el-input v-model="ruleForm.account_no" />
				</el-form-item>
			</template>
			<el-form-item v-else label="手续费" prop="procedure_money">
				<el-input v-model="ruleForm.procedure_money" />
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button type="primary" :loading="dialog.submitLoading" @click="onSubmitForm">申请提现</el-button>
			<el-button @click="onCancel">取 消</el-button>
		</template>
	</el-dialog>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus';
import { supplier1Api } from '/@/api/admin';

const Supplier1Api = supplier1Api();
export default {
	data() {
		return {
			dialog: {
				isShowDialog: false,
				type: '',
				title: '批量申请提现',
				submitLoading: false,
			},
			ruleForm: {
				type: '',
				money: '',
				bank_code: '',
				account_name: '',
				account_no: '',
			},
			rules: {
				refund_reason: [{ required: true, message: '拒绝原因不能为空', trigger: ['blur'] }],
			},
		};
	},
	methods: {
		// 提交
		onSubmitForm() {
			this.dialog.submitLoading = true;
			ElMessageBox.confirm(`是否确认申请此货款提现？`, '提示', { type: 'warning' })
				.then(() => {
					this.ruleForm.type === 4 ? this._applyPaymentHlb(this.ruleForm) : this._applyPaymentOther(this.ruleForm);
				})
				.catch(() => {
					this.dialog.submitLoading = false;
				});
		},
		// 取消
		onCancel() {
			this.dialog = {
				isShowDialog: false,
				type: '',
				title: '批量申请提现',
				submitLoading: false,
			};
		},

		/********** 方法事件 **********/
		openDialog(params, fn) {
			this.dialog.isShowDialog = true;
			this.callback = fn;
			this.$nextTick(() => {
				this.$refs.formRef.resetFields();
				this.ruleForm.type = params.type;
				params.type === 4 ? this._orderSelectedPaymentHlb(params) : this._orderSelectedPaymentOther(params);
			});
		},

		/********** 网络请求 **********/
		// 选中订单的货款信息【合利宝】
		_orderSelectedPaymentHlb(params) {
			Supplier1Api.orderSelectedPaymentHlb(params).then((res) => {
				this.ruleForm = {
					...params,
					...res.data.info,
				};
			});
		},
		// 选中订单的货款信息【其他】
		_orderSelectedPaymentOther(params) {
			Supplier1Api.orderSelectedPaymentOther(params).then((res) => {
				this.ruleForm = {
					...params,
					...res.data.info,
				};
			});
		},
		// 合利宝申请提现
		_applyPaymentHlb(params) {
			Supplier1Api.applyPaymentHlb(params)
				.then(() => {
					ElMessage.success('操作成功');
					this.onCancel();
					this.callback();
				})
				.catch(() => {
					this.dialog.submitLoading = false;
				});
		},
		// 其他支付申请提现
		_applyPaymentOther(params) {
			Supplier1Api.applyPaymentOther(params)
				.then(() => {
					ElMessage.success('操作成功');
					this.onCancel();
					this.callback();
				})
				.catch(() => {
					this.dialog.submitLoading = false;
				});
		},
	},
};
</script>
